<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>workerman 实战 web聊天室</title>

<link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css">
<style>
html{background-color: #333;}
</style>
</head>
<body>


<script src="/static/layuiadmin/layui/layui.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script>

layui.use('layim',function(layim){

    //建立WebSocket通讯
    var socket = new WebSocket("ws://im.phpdongyi.cn:9999?token={$token}");

    //连接成功时触发
    socket.onopen = function(){
        socket.send("xxx连接成功");
    };

    //监听发送的消息
    layim.on('sendMessage', function(res){
        socket.send(JSON.stringify({
            'type':"chatMessage",
            'data':res,
        }))
    });

        //接收到消息
    socket.onmessage = function(res) {
       console.log(res.data);
       res = JSON.parse(res.data);
       if(res.type==='friend'){
           layim.getMessage(res);
       }
    };
    //监听修改签名
    layim.on("sign",function (value) {
        console.log(value); //获得新的签名
        $.post('/updateSign',{sign:value},function (res) {
            if(res.status==='success'){
                location.reload();
            }else {
                alert(res.msg);
            }
        });
    });
    //监听在线状态切换
    layim.on('online', function(status){
        console.log(status); //获得online或者hide
        $.post('/updateOnline',{status:status},function (res) {
            if(res.status==='success'){
                location.reload();
            }else {
                alert(res.msg);
            }
        });
    });
    //监听返回
    layim.on('back', function(){
        //比如返回到上一页面（而不是界面）：
        history.back();
        //或者做一些其他的事
    });
    //监听关闭时间
    layim.on('close',function (data) {
       layim.removeChild(data.id);
    });


    layim.config({
        right:'100px',
		title:'web聊天',
		isgroup:false,
		copyright:true,
		init:{
			"url":"http://im.phpdongyi.cn/getFriends",
			"type":"get",
			"data":{}
		},
        //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
        uploadImage:{
			url:'http://im.phpdongyi.cn/upload',
            type:'post'
		},
        //以下为我们内置的模版，也可以换成你的任意页面。若不开启，剔除该项即可
        chatLog: "/chatlog",
    })
})
</script>
</body>

</html>
